<template>
  <div>
    <div class="title">数据筛选</div>
    <!-- 查看详情对话框 -->
    <dialog ref="dialogVisible"></dialog>
    <el-card>
      <template #header>
        <div class="search">
          <el-select
            v-model="params.type"
            clearable
            placeholder="选择查验类型"
            style="width: 190px"
          >
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="params.communityid"
            clearable
            placeholder="选择小区"
            style="width: 190px"
          >
            <el-option
              v-for="item in CommunityList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="params.testname"
            clearable
            placeholder="选择查验人员"
            style="width: 190px"
          >
            <el-option
              v-for="item in userList"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
          <div class="block">
            <el-date-picker
              v-model="params.endtime"
              type="datetime"
              placeholder="截至时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="MMM DD, YYYY"
              time-format="HH:mm"
            />
          </div>
          <el-input
            v-model="params.keyword"
            style="width: 240px"
            placeholder="输入关键字"
          />
          <el-button type="primary" :icon="Search" @click="searchHandle"
            >查询</el-button
          >
          <el-button type="" :icon="RefreshRight" @click="reset"
            >重置</el-button
          >
          <el-button type="" :icon="Search">导出报告</el-button>
          <el-button class="add" type="primary" :icon="Plus"
            >项目新增</el-button
          >
        </div>
      </template>
      <el-table
        :data="tableData"
        v-loading="Loading"
        :row-style="{ height: '57px' }"
        :header-cell-style="{
          background: '#F7F7FA',
          color: '#000',
          height: '57px',
        }"
        style="width: 100%; max-height: 650px"
      >
        <el-table-column type="index" label="编号" width="100" />
        <el-table-column prop="name" label="项目名称" width="320" />
        <el-table-column prop="type" label="查验类型" width="120">
          <template #default="scope">
            <el-text class="mx-1">{{
              scope.row.type == 1 ? "常规检查" : "街道巡检"
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="communityname" label="所属小区" width="180" />
        <el-table-column prop="templatename" label="模板名称" width="320" />
        <el-table-column
          prop="testname"
          label="查验人员"
          align="center"
          width="140"
        />
        <el-table-column
          prop="address"
          label="查验期限"
          width="180"
          align="center"
        >
          <template #default="scope">
            <el-text>{{
              $dayjs(scope.row.starttime).format("YYYY-MM-DD")
            }}</el-text>
            -
            <el-text>{{
              $dayjs(scope.row.endtime).format("YYYY-MM-DD")
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template #default="{ row, $index }">
            <el-text type="primary" @click="goseeDetail(row, $index)"
              >查看</el-text
            >
            <el-text
              type="primary"
              style="margin: 0 15px"
              @click="goManage(row, $index)"
              >管理</el-text
            >
            <el-text type="primary">删除</el-text>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
      <detaildialog ref="dialog"></detaildialog>
      <manageDialog
        ref="managedialog"
        :CommunityList="CommunityList"
        :userList="userList"
      ></manageDialog>

      <el-pagination
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[1, 3, 5, 10]"
        :small="small"
        size="5"
        :background="background"
        layout=" sizes, prev, pager, next, total,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { Share, Search, Plus, RefreshRight } from "@element-plus/icons-vue";
import { ProjectListApi, CommunityApi, userListApi } from "@/api/article";
import detaildialog from "@/components/DetailDialog.vue";
import manageDialog from "./components/manageDialog.vue";
const queryInfo = ref({
  pageNum: 10,
  pageSize: 1,
});
const Loading = ref(false);
const total = ref(0);
onMounted(async () => {
  handleCurrentChange();
  getCommunity();
  getUserList();
  // reset();
});

// 获取项目列表
const getprojectList = async () => {
  Loading.value = true;
  const res = await ProjectListApi(queryInfo.value);
  console.log(res, "项目列表");
  tableData.value = res.data.data;
  total.value = res.data.count;
  Loading.value = false;
};
// 获取查验类型
const value = ref("");
const type = [
  {
    value: 1,
    label: "常规检查",
  },
  {
    value: 2,
    label: "街道巡检",
  },
];
const CommunityList = ref([]);
// 获取小区列表
const getCommunity = async () => {
  const res = await CommunityApi({
    pageNum: 1,
    pageSize: 99999,
  });
  console.log(res, "小区列表");
  CommunityList.value = [];
  res.data.data.forEach((x) => {
    Object.assign(x, {
      label: x.name,
      value: x.id,
    });
    CommunityList.value.push(x);
  });
};
// 获取检查人员
const userList = ref([]);
// 获取检查人员列表
const getUserList = async () => {
  const res = await userListApi({
    pageNum: 1,
    pageSize: 99999,
    roleid: "3",
  });
  userList.value = [];
  res.data.data.forEach((x) => {
    Object.assign(x, {
      label: x.realname,
      value: x.userId + "",
    });
    userList.value.push(x);
  });

  console.log(res, "检查人员列表");
};
const params = ref({
  communityid: "",
  endtime: "",
  keyword: "",
  pageNum: 1,
  pageSize: 10,
  testname: "",
  type: "",
});
const reset = () => {
  params.value = {
    communityid: "",
    endtime: "",
    keyword: "",
    pageNum: 1,
    pageSize: 10,
    testname: "",
    type: "",
  };
  queryInfo.value = {
    pageNum: 1,
    pageSize: 10,
  };
  getprojectList();
};
// 点击查询搜索
const searchHandle = async () => {
  Loading.value = true;
  console.log(params.value, "查询参数");
  const res = await ProjectListApi(params.value);
  tableData.value = res.data.data;
  total.value = res.data.count;
  Loading.value = false;
};
const tableData = ref([]);
const background = ref(false);
const small = ref(false);

const handleSizeChange = (val) => {
  queryInfo.value.pageNum = 1;
  queryInfo.value.pageSize = val;
  getprojectList();
};
// 点击页码
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  getprojectList();
};
const dialog = ref();
const goseeDetail = (row) => {
  // console.log(row, "查看详情");
  //   console.log(dialogVisible.value, "dialogVis");
  dialog.value.open(row);
};
const managedialog = ref();
const goManage = (row) => {
  // console.log(row, "查看详情");
  managedialog.value.open(row);
};
</script>
<style lang='less' scoped>
.title {
  line-height: 50px;
}
:deep(.el-table thead) {
  color: #000;
}
.search {
  display: flex;
  align-items: center;
  .el-select,
  .block,
  .el-input {
    margin-right: 10px;
  }
}
.el-text {
  cursor: pointer;
}
.el-pagination {
  margin-top: 10px;
  justify-content: flex-end;
}
.add {
  justify-content: flex-end;
}
</style>